import { Link, Outlet } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';

function Layout() {
  const { token } = useAuth();
  
  return (
    <div className='app-layout'>
      <nav style={{ background: '#333', padding: '1rem', marginBottom: '1rem' }}>
        <Link to='/' style={{ marginRight: '1rem', color: 'white', textDecoration: 'none' }}>🏠 首页</Link>
        {!token ? (
          <>
            <Link to='/login' style={{ marginRight: '1rem', color: 'white', textDecoration: 'none' }}>🔐 登录</Link>
            <Link to='/register' style={{ marginRight: '1rem', color: 'white', textDecoration: 'none' }}>📝 注册</Link>
          </>
        ) : (
          <>
            <Link to='/kp/new' style={{ marginRight: '1rem', color: 'white', textDecoration: 'none' }}>➕ 添加知识点</Link>
            <Link to='/rag-search' style={{ marginRight: '1rem', color: 'white', textDecoration: 'none' }}>🔍 RAG搜索</Link>
          </>
        )}
      </nav>
      
      <main style={{ padding: '1rem', maxWidth: '1200px', margin: '0 auto' }}>
        {/* Outlet 是一个占位符，用于显示路由匹配的子组件 */}
        <Outlet /> 
      </main>
      
      <footer style={{ 
        background: '#f0f0f0', 
        padding: '1rem', 
        marginTop: '2rem', 
        textAlign: 'center', 
        color: '#666',
        fontSize: '0.9rem'
      }}>
        费曼学习法平台 © 2025
      </footer>
    </div>
  );
}
export default Layout;